<template>
    <el-row>
        <page-header title="文章列表" />
        <page-main>
            <!-- 搜索开始 -->
            <el-row>
                <el-col :md="24" :lg="4" class="mb-20">
                    <el-select v-model="queryInfo.category" clearable placeholder="分类" @clear="handleCurrentChange(1)">
                        <el-option
                            v-for="item in cateOptions"
                            :key="item.id"
                            :label="item.label"
                            :value="item.label"
                        />
                    </el-select>
                </el-col>
                <el-col :md="24" :lg="4" class="mb-20">
                    <el-select v-model="queryInfo.status" clearable placeholder="状态" @clear="handleCurrentChange(1)">
                        <el-option
                            v-for="item in statusOptions"
                            :key="item.id"
                            :label="item.label"
                            :value="item.status"
                        />
                    </el-select>
                </el-col>                
                <el-col :md="24" :lg="16">
                    <el-row>
                        <el-button type="primary" class="mb-20" @click="handleCurrentChange(1)">筛选</el-button>
                        <el-button type="primary" class="mb-20" @click="$router.push({name:'ArticleManagerPublish'})">发表文章</el-button>
                    </el-row>      
                </el-col>                                             
            </el-row>
            <!-- 搜索结束 -->

            <!-- 表格开始 -->
            <el-table :data="tableData" border stripe style="width: 100%;">
                <el-table-column type="index" label="序号" width="50" />
                <el-table-column prop="title" label="标题" />
                <el-table-column prop="name" label="作者" width="200" />
                <el-table-column prop="category" label="分类" width="180" />
                <el-table-column prop="datatime" label="发表时间" width="220" />
                <el-table-column prop="status" label="状态" width="100">
                    <template slot-scope="scope">                        
                        <el-tag v-if="scope.row.status" type="success" size="small" effect="plain">已发布</el-tag>
                        <el-tag v-else type="danger" size="small" effect="plain">未发布</el-tag>                        
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button
                            v-if="scope.row.status"
                            type="text"
                            size="small"
                            @click="$router.push({name:'ArticleManagerDetail',query:scope.row})"
                        >
                            查看
                        </el-button>
                        <el-button 
                            v-else
                            type="text" 
                            size="small"
                            @click="$router.push({name:'ArticleManagerEdit',query:scope.row})"
                        >
                            编辑
                        </el-button>
                        <el-button 
                            type="text" 
                            size="small"
                            @click="removeArticlesDataById(scope.row)"                            
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 表格结束 -->

            <!-- 分页开始 -->
            <el-pagination
                class="hidden-md-and-down mt-20"
                :current-page="queryInfo.page"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="queryInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />

            <el-pagination
                class="hidden-lg-and-up mt-20"
                layout="prev, pager, next"
                :total="total"
            />            
            <!-- 分页结束 -->
        </page-main>
    </el-row>
</template>

<script>
import {list, deletes} from '@/api/articles'

export default {
    data() {
        return {
            cateOptions: [
                {
                    id: '1',
                    label: '黄金糕'
                },
                {
                    id: '2',
                    label: '双皮奶'
                },
                {
                    id: '3',
                    label: '蚵仔煎'
                },
                {
                    id: '4',
                    label: '龙须面'
                },
                {
                    id: '5',
                    label: '北京烤鸭'
                }
            ], // 分类
            statusOptions: [
                {
                    id: '1',
                    status: false,
                    label: '未发布'
                },
                {
                    id: '2',
                    status: true,
                    label: '已发布'
                }                
            ], // 状态            
            tableData: [], // 列表数据
            queryInfo: { page: 1, pageSize: 10, status: '', category: '' }, // 列表请求参数
            total: 0 // 总条数
        }
    },
    created() {
        this.getArticlesListData()
    },
    methods: {
        /**
         * @description: 获取首页列表数据
         * @param {*}
         * @return {*}
         * @author: Yu
         */        
        async getArticlesListData() {            
            const {data: res} = await list(this.queryInfo)                              
            this.tableData = res.tableData 
            this.total = res.total           
        },

        /**
         * @description: 通过id删除文章
         * @param {*}
         * @return {*}
         * @author: Yu
         */
        async removeArticlesDataById(row) {
            const confirmResult = await this.$confirm(
                '此操作将永久删除该文章, 是否继续?',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }
            ).catch(err => err)
            if (confirmResult !== 'confirm') {
                return this.$message.info('已取消删除')
            }
            const res = await deletes(row)            
            this.$message.success(res.message)
            this.getArticlesListData()
        },

        /**
         * @description: 监听 pageSize 改变的事件
         * @param {*} newSize
         * @return {*}
         * @author: Yu
         */
        handleSizeChange(newSize) {
            this.queryInfo.pageSize = newSize
            this.getArticlesListData()
        },

        /**
         * @description: 监听 page 改变的事件
         * @param {*} newPage
         * @return {*}
         * @author: Yu
         */
        handleCurrentChange(newPage) {
            this.queryInfo.page = newPage
            this.getArticlesListData()
        }
    }
}
</script>
